var root = document.getElementsByClassName('root')[0],
		btn  = document.getElementsByTagName('button'),
		btn1 = btn[0],
		btn2 = btn[1],
		btn3 = btn[2];
function on(o,ev,fn, self){
    if(o.addEventListener){//ff，webkit
        o.addEventListener(ev,function(){
        	fn.call(self);
        },false);
    }else if(o.attachEvent){//ie 8-
        o.attachEvent('on'+ev,function(){//默认指向window
            fn.call(self); //改变this指向
        });
    }
}

(function(window){


function twoTree(){
	this.root = null;
}

twoTree.prototype = {
	constructor: twoTree,
	wrap: root,
	delay: 0,
	step: 500,
	add: function(value, parent){

		var node = {
			value: value,
			left:  null,
			right: null,
			parent:null
		};
		if(parent === undefined){
			parent = this.root;
		}
		if(this.root === null){
			this.root = node;
		}else{
			if(value < parent.value){
				if(parent.left != null){
					this.add(value, parent.left);
				}else{
					parent.left = node;
					parent.left.parent = parent; 
				}
			}else if(value > parent.value){
				if(parent.right != null){
					this.add(value, parent.right);
				}else{
					parent.right = node;
					parent.right.parent = parent; 
				}
			}
		}
	},
	render: function(parent, wrap){
		if(wrap === undefined){
			wrap = this.wrap;
		}
		if(parent){
			if(parent.left){
				var div = document.createElement('div');
				wrap.appendChild(div);
				this.render(parent.left, div);
			}
			if(parent.right){
				var div = document.createElement('div');
				wrap.appendChild(div);
				this.render(parent.right, div);
			}
		}
	},
	init: function(){
		var arr = [15,9,20,6,12,17,25,5,7,11,13,16,18,23,26];
		for(var i in arr){
			this.add(arr[i]);
		}
		this.render(this.root);
		on(btn1, 'click', this.btn1Click, this);
		on(btn2, 'click', this.btn2Click, this);
		on(btn3, 'click', this.btn3Click, this);
	},
	delayRun: function(wrap){
		
		setTimeout(function(){
			wrap.style.backgroundColor = 'green';
		},this.delay*this.step);
		setTimeout(function(){
			wrap.style.backgroundColor = 'white';
		},this.delay*this.step+this.step);
		this.delay++;
	},
	btn1Click: function(e, root, wrap){
		if(root === undefined){
			root = this.root;
			wrap = this.wrap;
			this.delay = 0;
		}
		if(root !== null){
			this.delayRun(wrap);
			this.btn1Click(e,root.left, wrap.children[0]);
			this.btn1Click(e,root.right, wrap.children[1]);
		}
	},
	btn2Click: function(e, root, wrap){
		if(root === undefined){
			root = this.root;
			wrap = this.wrap;
			this.delay = 0;
		}
		if(root !== null){			
			this.btn2Click(e,root.left, wrap.children[0]);		
			this.delayRun(wrap);
			this.btn2Click(e,root.right, wrap.children[1]);	
		}
	},
	btn3Click: function(e, root, wrap){
		if(root === undefined){
			root = this.root;
			wrap = this.wrap;
			this.delay = 0;
		}
		if(root !== null){
			this.btn3Click(e,root.left, wrap.children[0]);		
			this.btn3Click(e,root.right, wrap.children[1]);	
			this.delayRun(wrap);
		}
	}
};

window.twoTree = twoTree;
})(window);


var tree = new window.twoTree();
tree.init();
